React Reconciliation

reconciliation 調停

reactにおける差分検出処理のこと

React使うだけなら気にせんでいいんだけど、どうやって差分検出しているのかが気になるので読もう

木の複雑さは、木の要素nに対してO(n^3)になる

そのまま1000elementsをreactで表示しようと、10億の比較が必要になる

reactはheuristicなO(n)のアルゴリズム

２つの仮説に基づいている

異なる型の２つの要素は、異なる木をつくる

開発者は、keyを渡してどの子要素がrenderで変化が無いかを示唆できる

発見的

完全ではないが、ある程度の精度で答えを出せる

仮説１

異なる型の木

<a> <img>とか

こういう違いがあったら直ちに新しいものに置き換える

code:html

<div>

<Counter />

</div>

<span>

<Counter />

</span>

こういう場合は、Counterはdestroyされて新しいものが作られる

同じ型の木のとき

属性を比較する

木はそのままにして、変化した属性のみを更新する

その後に、下の要素に再帰する

子要素で再帰処理するとき

両方の子要素リストを同時に反復

違いがあるときは変化を生成する

これは先頭に要素を追加したりするとパフォーマンスによくない

対策 keys

keyがあるときはそれを元に比較するので大丈夫になる

keyはこの配列内でuniqueであれば十分

idとか適当にハッシュ値を使う

最終手段として、配列のindexを渡す

当然、reorderは遅くなる